<template>
    <div class="upgrade_you_zan_member_pass_container">
        <el-card shadow="never" style="margin: 16px 0">
            <!-- 表单内容区域 of start -->
            <div class="content">
                <!-- 表单步骤条 of start -->
                <div class="yzc_header">
                    <youZanProgress v-model="step" :progress="yzProgress"></youZanProgress>
                </div>
                <!-- 表单步骤条 of end -->
                <!-- step1 确认有赞设置 of start -->
                <div v-show="step === 1" class="yzc_form_content">
                    <p>
                        启用有赞会员通后，客户在有赞入会，通过会员手机号，实现各渠道身份打通。入会后，系统将为该会员同步来自各渠道的积分和成长值。
                    </p>
                    <p>请您根据下方示意图，检查有赞对应设置是否已到位：</p>

                    <div class="yzc_form_label">
                        <div class="yzc_form_label_round"></div>
                        设置用户授权-手机登录，至少启用以下选项：普通商品购买、普通商品拼团、课程购买（含拼团购物车）
                    </div>
                    <div class="yzc_form_images">
                        <img src="https://static.scrm.keyid.cn/assets/images/web-pc/yz_enable_member_pass1.png" />
                    </div>
                    <div class="yzc_form_label yzc_form_label_two">
                        <div class="yzc_form_label_round"></div>
                        设置会员等级模式为成长值会员，等级设置与客易达系统中的等级设置保持一致
                    </div>
                    <div class="yzc_form_images">
                        <img src="https://static.scrm.keyid.cn/assets/images/web-pc/yz_enable_member_pass2.png" />
                    </div>

                    <div class="yzc_form_label yzc_form_label_two">
                        <div class="yzc_form_label_round"></div>
                        若同时在有赞和客易达等级设置了升级礼包赠送积分，需关掉一处，防止会员升级重复赠送积分
                    </div>
                    <div class="yzc_form_images">
                        <img src="https://static.scrm.keyid.cn/assets/images/web-pc/yz_enable_member_pass3.jpg" />
                    </div>

                    <el-form ref="formRef" :model="model" :rules="rules" class="yzc_form_type">
                        <el-form-item label=" " prop="type" required>
                            <el-checkbox-group v-model="model.type">
                                <el-checkbox label="我已经设置好了，去下一步设置" name="type" />
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- step1 确认有赞设置 of end -->
                <!-- step2 计算设置 of start -->
                <div v-show="step === 2" class="yzc_form_content yzc_form_content_two">
                    <p class="yzc_form_content_two_desc">请设置订单积分产生的来源，以及新老会员订单积分计算设置</p>
                    <!-- 升级会员通才展示该描述 of start -->
                    <div v-if="isUpgrade == '1'" class="yzc_form_content_two_upgrade_text">
                        <img class="yz_worring_icon" src="@/assets/ecommerce/yz_worring_icon.png" />
                        <div>
                            <p>
                                请注意：若有赞之前已计算订单积分、成长值，且会员之前已在客易达会员小程序上绑定过有赞渠道
                            </p>
                            <p>
                                在<span class="yzc_form_content_text_operation" @click="handleOpenIntegral">
                                    积分设置</span
                                >中，积分合并规则设置为“
                                <span class="yzc_form_content_text_desc">
                                    根据用户在各个渠道的积分，累加得到该用户的最终积分</span
                                >时，会导致会员的有赞订单积分被重复计算
                            </p>
                            <p>
                                这种情况下，建议选择合并规则为“
                                <span class="yzc_form_content_text_desc">用户在各个渠道的最高分，作为最终积分</span>”。
                            </p>
                        </div>
                    </div>
                    <!-- 升级会员通才展示该描述 of end -->
                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="step2Rule" label-width="120px">
                        <el-form-item label="积分计算：" prop="type">
                            <el-radio-group v-model="ruleForm.type" class="ml-4">
                                <el-radio label="2">使用客易达全渠道统一规则</el-radio>
                                <el-radio label="1">使用有赞规则</el-radio>
                            </el-radio-group>
                            <div v-show="ruleForm.type == '2'" class="yzc_form_content_text">
                                使用客易达全渠道统一规则时，请关闭有赞的自定义积分规则和订单累计成长规则（<span
                                    class="yzc_form_content_text_operation"
                                    @click="handleOpenOperation">
                                    查看操作指引</span
                                >），<span class="yzc_form_content_text_desc">否则会导致订单积分、成长值重复计算</span>
                            </div>
                            <div v-show="ruleForm.type == '1'" class="yzc_form_content_text">
                                使用有赞规则时，客易达仅同步有赞会员积分、成长值，并与其他渠道会员信息合并
                            </div>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.type == '2' && isUpgrade != '1'" label="初始化规则：">
                            <div class="yzc_form_content_rule">
                                有赞会员，按
                                <span class="yzc_form_content_text_operation" @click="handleOpenIntegral">
                                    积分设置</span
                                >
                                补充计算历史订单
                                <el-tooltip effect="light" content="在对接客易达系统前产生的订单" placement="top">
                                    <img class="yz_member_pass_tips" src="@/assets/ecommerce/yz_member_pass_tips.png" />
                                </el-tooltip>

                                的积分和成长值
                            </div>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.type == '2' && isUpgrade == '1'" label="初始化规则：">
                            <div class="yzc_form_content_rule">
                                有赞新入会会员，按
                                <span class="yzc_form_content_text_operation" @click="handleOpenIntegral">
                                    积分设置</span
                                >
                                补充计算历史订单
                                <el-tooltip effect="light" content="在对接客易达系统前产生的订单" placement="top">
                                    <img class="yz_member_pass_tips" src="@/assets/ecommerce/yz_member_pass_tips.png" />
                                </el-tooltip>

                                的积分和成长值
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- step2 计算设置 of end -->
                <!-- step3 计算设置 of start -->
                <div v-show="step === 3" class="yzc_form_content_three">
                    <img
                        class="yz_progress_circle"
                        src="@/assets/ecommerce/upgradeYouZanMemberPass/yz_CircleCheckFilled.png" />
                    <p class="yzc_form_content_three_success_text">设置完成</p>
                    <p>
                        会员数据初始化已开始，请在
                        <span class="yzc_form_content_text_operation" @click="handleOpenAsyncTask"> 异步任务 </span>
                        中查看进度
                    </p>
                </div>
                <!-- step3 计算设置 of end -->
            </div>
            <!-- 表单内容区域 of end -->
        </el-card>
        <!-- 底部表单操作区域 of start -->
        <div class="upgrade_you_zan_member_pass_footer">
            <div v-if="step === 1 || step === 2" class="next">
                <el-button v-if="step === 1" @click="router.push('/ecommerce/storeManage/list')"> 取消 </el-button>
                <el-button v-if="step === 2" type="primary" @click="step--"> 上一步 </el-button>
                <el-button type="primary" :disabled="isDisabledNext" @click="nextStep"> 下一步 </el-button>
            </div>
            <div v-if="step === 3" class="finished">
                <el-button type="primary" @click="done"> 完成 </el-button>
            </div>
        </div>
        <!-- 底部表单操作区域 of end -->
    </div>
</template>

<script setup lang="ts">
import { computed, ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import type { FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';

import youZanProgress from './youZanProgress.vue';
import { ShowTaskMessage } from '@/hooks/TaskMessageHooks';
import { parabolaAnimation } from '@/utils/parabola';
import { openEnableHyt } from '@/api/ecommerce/storeManage';

// 声明路由配置
const router = useRouter();
const route = useRoute();

// 是否升级会员通，默认否，1-->是，''-->否
const isUpgrade = route.query.upgrade || '';
// 店铺ID
const shop_id = route.query.shop_id || '';
const hytType = route.query.hyt_type || '';

const memberParams = reactive({
    shop_id: shop_id, // 店铺ID
    member_rule_follow: '', // 是否使用官方规则
    hyt_type: hytType, // 是否使用官方会员通
    is_upgrade: isUpgrade // 是否为升级会员通操作
});

// step1 表单数据 of start
const formRef = ref(null);
const model = reactive({
    type: []
});
const rules = reactive<FormRules>({
    type: [
        {
            type: 'array',
            required: true,
            message: '请勾选必填项',
            trigger: 'change'
        }
    ]
});
// step1 表单数据 of end

// step2 表单数据 of start
const ruleFormRef = ref(null);
const ruleForm = reactive({
    type: '2' // 默认使用客易达规则
});
const step2Rule = reactive<FormRules>({
    type: []
});
// step2 表单数据 of end

/**
 * @description: 是否禁用下一步按钮
 * @return {*} Boolean
 */
const isDisabledNext = computed(() => {
    if (model.type.length > 0) {
        return false;
    } else {
        return true;
    }
});

/**
 * 计算表单内容区域高度
 */
const height = computed(() => {
    const clientHeight = document.documentElement.clientHeight;
    return `${clientHeight - 260}px`;
});

/**
 * 启用/升级会员通步骤条标题
 */
const yzProgress = ref(['确认有赞设置', '计算设置', '完成']);
// 当前步数
const step = ref(1);

/**
 * 点击下一步
 */
const nextStep = async e => {
    // 第2步点击完成初始化异步任务
    if (step.value === 2) {
        memberParams.member_rule_follow = ruleForm.type;
        const res = await openEnableHyt(memberParams);
        if (res) {
            parabolaAnimation(e);
            ShowTaskMessage(res.msg);
        }
    }
    step.value++;
};

/**
 * 完成操作：跳转到店铺列表
 */
const done = () => {
    router.push('/ecommerce/storeManage/list');
};

/**
 * 打开查看操作指引
 */
const handleOpenOperation = () => {
    window.open(`${location.origin}/yz-member-pass-operational-guideline`);
};

/**
 * 打开积分设置页面
 */
const handleOpenIntegral = () => {
    window.open(`${location.origin}/member/pointsManage/pointsSettings`);
};
/**
 * 打开异步任务列表页面
 */
const handleOpenAsyncTask = () => {
    router.push('/channelconfig/dataManagement/asyncTask');
};
</script>

<style scoped lang="scss">
.upgrade_you_zan_member_pass_container {
    .content {
        height: v-bind(height);
        overflow-y: auto;
    }

    .next {
        display: flex;
        justify-content: flex-end;
    }

    .yzc_header {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 57px;
        width: 100%;
        margin-bottom: 24px;
    }

    .finished {
        display: flex;
        justify-content: flex-end;
    }

    .yzc_form_content {
        font-size: 16px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #33302d;
        line-height: 22px;

        .yzc_form_label {
            font-size: 16px;
            font-family: PingFangSC-Medium, 'PingFang SC';
            font-weight: 500;
            color: #33302d;
            line-height: 16px;
            height: 40px;
            background: #fffaf9;
            display: flex;
            align-items: center;
            margin-top: 16px;

            .yzc_form_label_round {
                width: 8px;
                height: 8px;
                background: #ff6b00;
                border-radius: 50%;
                margin: 0 16px;
            }
        }

        .yzc_form_images {
            width: 100%;
            height: 468px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                margin-top: 16px;
            }
        }

        .yzc_form_label_two {
            margin-top: 16px;
        }

        :deep(.el-checkbox__label) {
            font-size: 16px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #33302d;
            line-height: 16px;
        }

        .yzc_form_type {
            margin-top: 16px;
        }

        .yzc_form_content_two :deep(.el-form-item__label) {
            font-size: 14px;
        }

        .yzc_form_content_two_upgrade_text {
            width: 946px;
            height: 80px;
            background: #fffaf9;
            border-radius: 4px;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #585858;
            line-height: 20px;
            padding: 10px 16px;
            box-sizing: border-box;
            display: flex;

            .yz_worring_icon {
                width: 24px;
                height: 24px;
                margin-right: 4px;
            }
        }

        .yzc_form_content_text {
            width: 914px;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #585858;
            line-height: 20px;
            height: 36px;
            background: #fffaf9;
            border-radius: 4px;
            margin-top: 17px;
            display: flex;
            align-items: center;
            padding: 0 16px;
        }

        .yzc_form_content_two_desc {
            margin-bottom: 25px;
        }
    }

    .yzc_form_content_text_operation {
        color: #ff6b00;
        cursor: pointer;
    }

    .yzc_form_content_text_desc {
        color: #f53f3f;
    }

    .yzc_form_content_rule {
        display: flex;
        align-items: center;
    }

    .yz_member_pass_tips {
        width: 16px;
        height: 16px;
    }

    .upgrade_you_zan_member_pass_footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 64px;
        background: #fff;
        box-shadow: 0 0 10px 0 rgb(212 212 212 / 50%);
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .yzc_form_content_three {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #696969;
        line-height: 20px;

        .yz_progress_circle {
            width: 72px;
            height: 72px;
            margin-bottom: 24px;
        }

        .yzc_form_content_three_success_text {
            font-size: 24px;
            font-family: PingFangSC-Medium, 'PingFang SC';
            font-weight: 500;
            color: #333;
            line-height: 33px;
            margin-bottom: 16px;
        }
    }
}
</style>
